<template>
  <view class="popup-box-container" v-if="show">
    <view class="popup-box" :style="{ top: top + 'rpx' }">
      <slot></slot>
    </view>
    <view class="mask" @click="handleClose"></view>
  </view>
</template>
<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  top: {
    type: Number,
    default: 0
  },
  bgColor: {
    type: String,
    default: '#fff'
  }
})

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}
</script>
<style scoped lang="scss">
.popup-box-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

.popup-box {
  position: absolute;
  left: 0;
  width: 100%;
  background: v-bind(bgColor);
  max-height: 50vh;
  overflow: auto;
  z-index: 99;
  border-radius: 0 0 20rpx 20rpx;
}


.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}
</style>